<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: xiangyinjie
  Date: 2021/5/14
  Time: 18:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //获取项目的根路径
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=basePath%>layui-v2.6.5/layui/css/layui.css"  media="all">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>swee/sweetalert.css">
    <script type="text/javascript" src="<%=basePath%>swee/sweetalert-dev.js"></script>
</head>
<style type="text/css">
    ul li{
        display: inline;
    }
    img{
        width: 25px;
        height: 25px;
    }
    #cancel{
        float: right;
        font-size: 24px;
        width: 25px;
        height: 25px;
        margin-right: 412px;
    }
    .login{
        width: 560px;
        height: 470px;
        border: 0px #009f95 solid;
        margin: auto;
        margin-top: 100px;
        padding-right: 160px;
        background-color: #009f95;
    }
    #login p,.login p{
        font-size: 18px;
        margin-right: auto;
        float:right;
        margin-top: 30px;
    }
    .anniu li{
        margin-left: 10px;
    }
    .biaoti{
        margin-top: 6px;
        margin-left: 240px;
    }
    .queding{
        margin-left: 930px;
        margin-top: -65px;
    }
    .cancel {
        float: right;
        font-size: 24px;
        width: 25px;
        height: 25px;
        margin-right: 12px;
        padding-bottom: 50px;
    }
    #modification{
        display: none;
    }
    #modification{
        position:relative;
        margin-top: -400px;
        z-index:20;
    }
    .layui-inline{
        margin-left: 40%;
    }
    input{
        margin-top: 10px;
        border: none;
        border-bottom:1.5px solid #009f95;
        margin-left: 10px;
        height: 30px;
    }
    #money{
        width: 300px;
        height: 150px;
        display: none;
        border: 1px sandybrown solid;
        position: relative;
        z-index: 30;
        margin: auto;
        margin-top:-330px;
        background-color: #FFFFFF;
    }

</style>
<body>
<form method="post" action="<%=basePath%>PageFrontdeskCardServlet?operation=inquire">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>补卡</legend>
    </fieldset>
    <div class="layui-inline">
        <div class="layui-input-inline ">
            <input type="text" name="id"  class="layui-input">
        </div>
    </div>
    <button type="submit" class="layui-btn" style="background-color:#009f95;">搜索</button>

    <table class="layui-table" lay-skin="line">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>编号</th>
            <th>身份证号码</th>
            <th>姓名</th>
            <th>性别</th>
            <th>电话号码</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${requestScope.pagefrontdeskCard.list}" var="frontdeskCard">
            <tr>
                <td>${frontdeskCard.id}</td>
                <td>${frontdeskCard.idCard}</td>
                <td>${frontdeskCard.name}</td>
                <td>${frontdeskCard.sex}</td>
                <td>${frontdeskCard.phone}</td>
                <td>${frontdeskCard.age}</td>
                <td><a href="#" class="replacement"><button type="button" class="layui-btn layui-btn-xs layui-btn-normal" style="background-color:#009f95;width: 40px;height: 25px;">补办</button></a>
                    <a href="#" class="recharge"><button type="button" class="layui-btn layui-btn-xs layui-btn-normal" style="background-color:#009f95;width: 40px;height: 25px;">充值</button></a>
                </td>

            </tr>
        </c:forEach>
        </tbody>
    </table>
    <span style="margin-left: 40%"></span>
    <c:if test="${requestScope.pagefrontdeskCard.currentPage!=1} ">
    <a href="<%=basePath%>PageFrontdeskCardServlet?curr=1&id=${requestScope.pagefrontdeskCardId}&operation=inquire"><button type="button" class="layui-btn layui-btn-sm">首页</button></a>
    </c:if>
    <c:if test="${requestScope.pagefrontdeskCard.currentPage>1}">
    <a href="<%=basePath%>PageFrontdeskCardServlet?curr=${requestScope.pagefrontdeskCard.currentPage-1}&id=${requestScope.pagefrontdeskCardId}&operation=inquire"><button type="button" class="layui-btn layui-btn-sm">上一页</button></a>
    </c:if>
    <button type="button" class="layui-btn layui-btn-sm" style="margin-right: 5px">${requestScope.pagefrontdeskCard.currentPage}</button><span style="font-size: 30px;position: absolute">/ </span>  <button type="button" class="layui-btn layui-btn-sm" style="margin-left: 5px">${requestScope.pagefrontdeskCard.totalPage}</button>
    <c:if test="${requestScope.pagefrontdeskCard.currentPage<requestScope.pagefrontdeskCard.totalPage}">
    <a href="<%=basePath%>PageFrontdeskCardServlet?curr=${requestScope.pagefrontdeskCard.currentPage+1}&id=${requestScope.pagefrontdeskCardId}&operation=inquire"><button type="button" class="layui-btn layui-btn-sm">下一页</button></a>
    </c:if>
    <c:if test="${requestScope.pagefrontdeskCard.currentPage!=requestScope.pagefrontdeskCard.totalPage}">
    <a href="<%=basePath%>PageFrontdeskCardServlet?curr=${requestScope.pagefrontdeskCard.totalPage}&id=${requestScope.pagefrontdeskCardId}&operation=inquire"><button type="button" class="layui-btn layui-btn-sm">尾页</button></a>
    </c:if>
    <div id="money" style="height: 200px" >
        <div class="cancel"><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">×</i></button></div>
        <br>
        <br>
        充值金额：<input type="text" name="amount" class="amount">
        <input type="hidden" name="cunid" class="amount">
        <button type="button" id="dianji" class="layui-btn" style="width: 120px;margin-left: 90px;margin-top: 20px">充值</button>
    </div>
    <div id="modification">
        <div id="cancel"><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">×</i></button></div>
        <div class="login">

            <h1 class="biaoti">华子医院补卡登记</h1>
            <p>
                <input type="text" name="ids" style="width:270px; height:27px;display: none">
            </p>
            <p>
                请输入身份证号码：
                <input type="text" name="idCards" style="width:270px; height:27px;readonly:readonly;">
            </p>
            <p>
                请输入姓名：
                <input type="text" name="names" style="width:270px; height:27px;readonly:readonly;">
            </p>
            <p>
                请输入密码：
                <input type="password" name="pwds" style="width:270px; height:27px;">
            </p>
            <p>
                请输入性别：
                <input type="text" name="sexs" style="width:270px; height:27px;readonly:readonly;">
            </p>
            <p>
                年龄：
                <input type="text" name="ages" style="width:270px; height:27px;readonly:readonly;">
            </p>
            <p>
                电话号码：
                <input type="text" name="phones" style="width:270px; height:27px;readonly:readonly;">
            </p>
            <p>
                <input type="text" name="moneys" style="width:270px; height:27px;display: none">
            </p>
        </div>
        <div class="queding">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" style="background-color: #ffffff" onclick="cardreissue()">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius" style="background-color: #ffffff">重置</button>

        </div>
    </div>
    <script src="<%=basePath%>/layui-v2.6.6/layui/layui.js" charset="utf-8"></script>
    <script src="<%=basePath%>jquery/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function (){
            $("#cancel").click(function (){
                $("#modification").hide();
            })
            $(".cancel").click(function (){
                $("#money").hide();
            })
            $(".recharge").click(function (){
                var $id = $(this).parent().parent().children("td:eq(0)").text();
                $("input[name='cunid']").val($id);
                $("#money").show();
            })
            $("#dianji").click(function (){
                var $amount = $("input[name='amount']").val();
                var $cunid = $("input[name='cunid']").val();
                $.ajax({
                    async: false,
                    url:"<%=basePath%>PageFrontdeskCardServlet",
                    type:"post",
                    data:{
                        id:$cunid,
                        amount:$amount,
                        operation:"rechargeable",
                    },
                    dataType:"JSON",
                    success:function (data){
                        if (data) {
                            $("#login :input").val("");
                            swal("充值成功！","","success");
                            $("#money").hide();

                        }else {
                            swal({
                                title: "<img src='错误.png'><small>充值失败！</small>!",
                                html: true
                            });
                        }

                    }
                })
            })
        $(".replacement").click(function (){
            $("#modification").show();
            var $id = $(this).parent().parent().children("td:eq(0)").text();
            $.ajax({
                async: false,
                url:"<%=basePath%>PageFrontdeskCardServlet",
                type:"post",
                data:{
                    id:$id,
                    operation:"idquery"
                },
                dataType:"JSON",
                success:function (data){
                    for (var i=0;i<data.length;i++){
                        $("input[name='ids']").val(data[i].id);
                        $("input[name='idCards']").val(data[i].idCard);
                        $("input[name='names']").val(data[i].name);
                        $("input[name='sexs']").val(data[i].sex);
                        $("input[name='ages']").val(data[i].age);
                        $("input[name='phones']").val(data[i].phone);
                        $("input[name='moneys']").val(data[i].money);
                    }

                }
            })
        })
        })
        function cardreissue(){
            var $ids = $("input[name='ids']").val();
            var $idCards = $("input[name='idCards']").val();
            var $names = $("input[name='names']").val();
            var $pwds = $("input[name='pwds']").val();
            var $sexs = $("input[name='sexs']").val();
            var $ages = $("input[name='ages']").val();
            var $phones = $("input[name='phones']").val();
            var $moneys = $("input[name='moneys']").val();
            if ($pwds.toString().trim().length!=6){
                swal({
                    title: "<img src='错误.png'><small>密码长度为6位！</small>!",
                    html: true
                });
                return;

            }
            $.ajax({
                url:"<%=basePath%>FrontdeskreplacementServlet",
                type:"post",
                data:{
                    ids:$ids,
                    idCard:$idCards,
                    name:$names,
                    pwd:$pwds,
                    sex:$sexs,
                    age:$ages,
                    phone:$phones,
                    moneys:$moneys
                },
                dataType:"JSON",
                success:function (data){
                    if (data) {
                        swal({
                                title: "补卡成功！",
                                type: "success",
                                html: true
                            },
                            function(){
                                $(":input").val("");
                                window.location.reload();
                            });
                    }else {
                        swal({
                            title: "<img src='错误.png'><small>补卡失败！</small>!",
                            html: true
                        });
                    }
                }
            })
        }
    </script>
</body>
</html>
